<template>
  <div v-if="data">
    <!-- 首页一楼  轮播图  start -->
    <swiper
      ref="swiper"
      @mouseover.native="stopSwiper"
      @mouseout.native="startSwiper"
      :options="swiperOption"
    >
      <swiper-slide v-for="n in data" :key="n.cid">
        <img :src="'http://127.0.0.1:3000/' + n.img" alt="" @click="swiper" />
        {{ n.title }}
      </swiper-slide>

      <div class="swiper-scrollbar" slot="scrollbar"></div>
    </swiper>
    <!-- 首页一楼  轮播图  end -->

    <!-- 二樓 公告栏  start -->
    <index-notice />
    <!-- 二樓 公告栏  end -->

    <!-- 三楼 探索 start -->
    <!-- probe探索 -->
    <div id="probe">
      <div class="container">
        <div class="p">
          <div class="p1" v-for="n in dataProbe" :key="n.pid">
            <div class="p1-1" @click="probe">
              <img :src="'http://127.0.0.1:3000/' + n.cover_picture" alt="" />
              <span>首发售罄</span>
            </div>
            <div class="p1-2" @click="probeTx">
              <img :src="'http://127.0.0.1:3000/' + n.head_portrait" alt="" />
              <div>
                <span>{{ n.brand_name }}</span>
                <span>{{ n.nick_name }}</span>
              </div>
            </div>
          </div>
          <div class="p2">
            <div class="p2-1">
              <span>臻于创造 品味不凡！</span>
              <p>
                NVWA是全球首个连接实体经济的数字藏品电商平台，在这里，您可以创建、发现、购买非凡的数字藏品。
                通过NVWA，见证数字经济与实体经济深度融合，共同迈向无限元宇宙空间。
              </p>
            </div>
            <div class="p2-2">
              <input type="button" class="btn" value="探索" @click="tansuo" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 三楼 探索  end-->
    <!-- 四楼 精选藏品集轮播 start -->
    <index-jxcp />
    <!-- 四楼 精选藏品集 end -->
    <!-- 五楼 热门排行榜 start -->
    <div id="hot">
      <div class="container">
        <div class="header">
          <div>
            <p>热门排行榜</p>
            <select name="" id="select">
              <option value="">1天</option>
              <option value="">7天</option>
              <option value="">30天</option>
            </select>
          </div>
          <div>
            <span class="active" id="cpjHot" @click="cpjHot">藏品集</span>
            <span @click="mhHot" id="mhHot">盲盒</span>
            <span><router-link to="*">更多</router-link></span>
          </div>
        </div>
        <div class="table">
          <div class="tb-left">
            <table>
              <thead>
                <tr>
                  <td></td>
                  <td>系列</td>
                  <td></td>
                  <td>地板价</td>
                  <td>挂单均价</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(n, index) in dataHot1" :key="n.pid" @click="hot">
                  <td style="color: #e8721d">{{ index + 1 }}</td>
                  <td>
                    <img
                      style="width: 50px; height: 50px"
                      :src="'http://127.0.0.1:3000/' + n.cover_picture"
                      alt=""
                    />
                  </td>
                  <td class="td-p">
                    {{ n.nick_name }}
                    <div>
                      <img :src="'http://127.0.0.1:3000/' + n.icon" alt="" />
                      <p>官方已认证</p>
                    </div>
                  </td>
                  <td>￥{{ n.price }}</td>
                  <td>￥{{ n.average_price }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="tb-left">
            <table>
              <thead>
                <tr>
                  <td></td>
                  <td>系列</td>
                  <td></td>
                  <td>地板价</td>
                  <td>挂单均价</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(x, index) in dataHot2" :key="x.pid" @click="hot">
                  <td>{{ index + 6 }}</td>
                  <td>
                    <img
                      style="width: 50px; height: 50px"
                      :src="'http://127.0.0.1:3000/' + x.cover_picture"
                      alt=""
                    />
                  </td>
                  <td class="td-p">
                    {{ x.nick_name }}
                    <div>
                      <img :src="'http://127.0.0.1:3000/' + x.icon" alt="" />
                      <p>官方已认证</p>
                    </div>
                  </td>
                  <td>￥{{ x.price }}</td>
                  <td>￥{{ x.average_price }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!-- 五楼 热门排行榜 end -->
    <!-- 六楼 藏品展示 start -->
    <div id="show">
      <div class="container">
        <div class="show-header">
          <span>精选藏品</span>
          <span><router-link to="*">更多</router-link></span>
        </div>
        <div class="show-body">
          <ul v-if="jxzpdata">
            <li v-for="x in jxzpdata" :key="x.pid" @click="show">
              <div class="body-1">
                <img :src="'http://127.0.0.1:3000/' + x.cover_picture" alt="" />
                <div class="body-2">
                  <p>{{ x.brand_name }}</p>
                  <div class="body-3">
                    <p>{{ x.collection_name }}</p>
                    <div class="body-3-p">
                      <img
                        style="width: 15px; height: 15px"
                        :src="'http://127.0.0.1:3000/' + x.icon"
                        alt="v"
                      />
                      <p>官方已认证</p>
                    </div>
                  </div>
                  <div class="body-4">
                    地板价: ￥<span>{{ x.price }}</span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 六楼 藏品展示 end -->
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import IndexNotice from "@/components/IndexNotice.vue";
import IndexJxcp from "@/components/IndexJxcp.vue";

export default {
  mounted() {
    this.getlunbo();
    this.getData();
    this.getHot1();
    this.getHot2();
    this.getProbe();
  },
  methods: {
    //热门排行榜 点击添加激活样式
    cpjHot() {
      // console.log('点击了藏品集');
      document.getElementById("mhHot").classList.remove("active");
      document.getElementById("cpjHot").classList.add("active");
      this.getHot1();
      this.getHot2();
    },
    mhHot() {
      // console.log('盲盒被点击了');
      document.getElementById("mhHot").classList.add("active");
      document.getElementById("cpjHot").classList.remove("active");
      //热门排行榜-盲盒-表1数据
      var url = "http://127.0.0.1:3000/v1/pro/mhhot1";
      this.axios.get(url).then((res) => {
        console.log("盲盒表一", res);
        this.dataHot1 = res.data;
      });

      //热门排行榜-盲盒-表2数据
      var url = "http://127.0.0.1:3000/v1/pro/mhhot2";
      this.axios.get(url).then((res) => {
        console.log("盲盒表二", res);
        this.dataHot2 = res.data;
      });
    },
    //精选轮播 点击添加激活样式
    cpjActive() {
      // console.log('点击了藏品集');
      document.getElementById("mhActive").classList.remove("active");
      document.getElementById("cpjActive").classList.add("active");
    },
    mhActive() {
      // console.log('盲盒被点击了');
      document.getElementById("mhActive").classList.add("active");
      document.getElementById("cpjActive").classList.remove("active");
    },
    //点击精选藏品展示
    show() {
      this.$router.push("*");
    },
    //点击热门排行跳转
    hot() {
      this.$router.push("*");
    },
    //点击探索按钮
    tansuo() {
      this.$router.push("*");
    },
    //点击探索栏头像。。
    probeTx() {
      this.$router.push("*");
    },
    //点击探索栏图片
    probe() {
      this.$router.push("*");
    },
    //点击轮播图跳转
    swiper() {
      this.$router.push("*");
    },
    //探索栏数据
    getProbe() {
      var url = "http://127.0.0.1:3000/v1/pro/probe";
      this.axios.get(url).then((res) => {
        console.log("探索栏数据", res);
        this.dataProbe = res.data;
      });
    },
    //热门排行榜表1数据
    getHot1() {
      var url = "http://127.0.0.1:3000/v1/pro/hot1";
      this.axios.get(url).then((res) => {
        console.log("表一", res);
        this.dataHot1 = res.data;
      });
    },
    //热门排行榜表2数据
    getHot2() {
      var url = "http://127.0.0.1:3000/v1/pro/hot2";
      this.axios.get(url).then((res) => {
        console.log("表二", res);
        this.dataHot2 = res.data;
      });
    },
    //轮播图数据
    getlunbo() {
      var url = "http://127.0.0.1:3000/v1/pro/showcarousel";
      this.axios.get(url).then((res) => {
        console.log("轮播图数据", res);
        this.data = res.data;
      });
    },
    //首页精选藏品数据
    getData() {
      var url = "http://127.0.0.1:3000/v1/pro/products";
      this.axios.get(url).then((res) => {
        console.log("精选藏品", res);
        this.jxzpdata = res.data;
      });
    },
    //轮播图暂停
    stopSwiper() {
      // console.log(this.$refs);
      this.$refs.swiper.$swiper.autoplay.stop();
    },
    startSwiper() {
      this.$refs.swiper.$swiper.autoplay.start();
    },
  },
  name: "swiper-example-scrollbar",

  title: "Scrollbar",

  components: {
    Swiper,
    SwiperSlide,
    IndexNotice,
    IndexJxcp,
  },

  data() {
    return {
      data: null,
      datamhlb: null,
      jxzpdata: null,
      dataHot1: null,
      dataHot2: null,
      dataProbe: null,
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
        scrollbar: {
          el: ".swiper-scrollbar",
          hide: true,
        },
      },
    };
  },
};
</script>
<style scoped src="../assets/css/index.css"></style>
<style lang="scss" scoped>
.swiper-container {
  margin: 0px auto;
  width: 100%;
  height: 400px;
  transition: 2s;
}
</style>
